<template>
  <router-view></router-view>
  <van-player :mini-layout="miniLayout"></van-player>
</template>

<script setup>
import { computed, watch, ref } from 'vue';
import VanPlayer from '@/components/player/index.vue';
import { useMyRouters } from '@/router';
import { useMyStores } from '@/store';

const { route } = useMyRouters();
const { appStore, playerStore, fullPlayer } = useMyStores();

const miniLayout = ref('mini-player-layout');

// 监听路由题变化(/^\/layout/)
const pagePath = computed(() => route.path);
watch(pagePath, newVal => {
  if (/^\/layout/.test(newVal)) {
    appStore.SET_TAB_BAR(true);
    miniLayout.value = 'mini-player-layout';
  } else {
    appStore.SET_TAB_BAR(false);
    miniLayout.value = 'mini-player-other';
  }
  if (fullPlayer.value) {
    playerStore.SET_MINI_PLAYER(true);
    playerStore.SET_FULL_PLAYER(false);
  }
});
</script>

<style lang="less">
.page {
  padding: 12px;
}
.loading {
  margin-top: 60px;
}
.van-action-sheet__content {
  min-height: 400px;
  .van-cell {
    padding-left: 15px;
  }
}
.section::after {
  content: '';
  display: block;
  width: 100%;
  height: 120px;
}
</style>
